<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <style>

        .showMessage {
            padding: 5px 10px;
            border-radius: 5px;
            position: fixed;
            top: 45%;
            left: 45%;
            color: #ffffff;
        }

        .showMessageSuccess {
            background-color: #13f305;
        }

        .showMessageError {
            background-color: #ff0000;
        }

        #all{
            width: 100%;
            height: 100%;
        }

        #top,#center{
            display: flex;
        }

        table,tbody{
            display: block;
            height: 300px;
            border: 0;
            border-spacing: 0;
            border-collapse: collapse;
            cursor: default;
        }
        tbody{
            overflow-y: scroll;
        }
        table thead,
        tbody tr{
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        table thead{
            width: calc(100% - 1em);
        }

        table thead th {
            background: #84acde;
        }

        table tbody td {
            width: 20%;
            text-align: center;
        }
    </style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        let inputCount = 1;

        $(function(){

            $('#stage').change(function () {
                //获取所有文本内容
                // var text = $("#stage").text();

                //获取选中的文本值
                var selectedText = $("#stage").find("option:selected").text();

                //获取选中的value值
                var value = $("#stage").val();

                if (value === '0'){
                    $("#inputsWrapper").html("");
                    return;
                }

                //获取选中的option的索引值
                // var index = $("#stage").get(0).selectedIndex;

                // console.log(text);
                console.log(selectedText);
                console.log(value);
                // console.log(index);

                $.ajax({
                    //几个参数需要注意一下
                    type: "GET",//方法类型
                    dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                    url: "http://localhost:8080/getStages",//url
                    data: {stage: value},
                    // data: $('#myForm').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                    success: function (result) {
                        console.log(result);//打印服务端返回的数据(调试用)
                        let stages = JSON.parse(result);
                        $("#inputsWrapper").html("");
                        inputCount = 0;
                        for (let i = 0; i < stages.length; i++) {
                            let value = stages[i];
                            inputCount++;
                            let inputId ="content_"+inputCount
                            let textId = "text_"+inputCount
                            let brId = "br_"+inputCount
                            if (i === 0){
                                $("#inputsWrapper").append("<span id="+textId+">请输入内容</span><input name='contents' required='required' id='"+inputId+"' value='"+ value + "'>");
                            } else {
                                $("#inputsWrapper").append("<br id="+brId+"><span id="+textId+">请输入内容</span><input name='contents' required='required' id='"+inputId+"' value='"+ value + "'>");
                            }

                        }
                    },
                });
            })

            $("#name").empty();
            $("#name2").empty();
            $("#name3").empty();
            $("#name4").empty();
            $("#name5").empty();
            $("#name6").empty();
            $("#name7").empty();
            $("#name8").empty();
            $("#name9").empty();

            $("#name").append("<option>请选择</option>");
            $("#name2").append("<option>请选择</option>");
            $("#name3").append("<option>请选择</option>");
            $("#name4").append("<option>请选择</option>");
            $("#name5").append("<option>请选择</option>");
            $("#name6").append("<option>请选择</option>");
            $("#name7").append("<option>请选择</option>");
            $("#name8").append("<option>请选择</option>");
            $("#name9").append("<option>请选择</option>");

            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                url: "http://localhost:8080/socket/getSocketList",//url
                // data: $('#myForm').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    let names = JSON.parse(result);
                    for (let i = 0; i < names.length; i++) {
                        $("#name").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                        $("#name2").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                        $("#name3").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                        $("#name4").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                        $("#name5").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                        $("#name6").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                        $("#name7").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                        $("#name8").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                        $("#name9").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                    }
                },
            });

            $("#tbId").html("");

            $.ajax({
                type: "GET",
                dataType: "text",
                url: "http://localhost:8080/socket/getMsgList",//url
                // data: $('#myForm').serialize(),
                success: function (result) {
                    console.log(result);
                    let names = JSON.parse(result);
                    for (let i = 0; i < names.length; i++) {
                        $("#tbId").append("<tr><td width=\"100\">"+names[i].name+"</td> <td width=\"300\">"+names[i].content+"</td></tr>")
                    }
                },
            });

            if (typeof (WebSocket) != "undefined") {
                console.log("您的浏览器支持WebSocket");
                //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
                //等同于
                let name = 'aW5kZXgNCg==';
                let url = 'aW5kZXgNCg==';
                index = new WebSocket("ws://localhost:8080/websocket/oneToMany?name=" + name + "&url=" + url);
                //socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
                //打开事件
                index.onopen = function () {
                    console.log("Socket 已打开");
                    //socket.send("这是来自客户端的消息" + location.href + new Date());
                };
                //获得消息事件
                index.onmessage = function (msg) {
                    console.log(msg.data);
                    //发现消息进入    开始处理前端触发逻辑
                    if (msg.data === "reload"){
                        // 重新获取设备列表
                        $("#name").empty();
                        $("#name2").empty();
                        $("#name3").empty();
                        $("#name4").empty();
                        $("#name5").empty();
                        $("#name6").empty();
                        $("#name7").empty();
                        $("#name8").empty();
                        $("#name9").empty();

                        $("#name").append("<option>请选择</option>");
                        $("#name2").append("<option>请选择</option>");
                        $("#name3").append("<option>请选择</option>");
                        $("#name4").append("<option>请选择</option>");
                        $("#name5").append("<option>请选择</option>");
                        $("#name6").append("<option>请选择</option>");
                        $("#name7").append("<option>请选择</option>");
                        $("#name8").append("<option>请选择</option>");
                        $("#name9").append("<option>请选择</option>");

                        $.ajax({
                            //几个参数需要注意一下
                            type: "GET",//方法类型
                            dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                            url: "http://localhost:8080/socket/getSocketList",//url
                            // data: $('#myForm').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                            success: function (result) {
                                console.log(result);//打印服务端返回的数据(调试用)
                                let names = JSON.parse(result);
                                for (let i = 0; i < names.length; i++) {
                                    $("#name").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                                    $("#name2").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                                    $("#name3").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                                    $("#name4").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                                    $("#name5").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                                    $("#name6").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                                    $("#name7").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                                    $("#name8").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                                    $("#name9").append("<option value='"+names[i]+"'>"+names[i]+"</option>");
                                }
                            },
                        });
                    } else {
                        // 显示弹幕消息
                        $("#tbId").html("");
                        let obj = JSON.parse(msg.data);
                        for (let i=0;i<obj.length;i++){
                            let msg = obj[i];
                            $("#tbId").append("<tr><td>"+msg.name+"</td> <td>"+msg.content+"</td></tr>")
                        }
                    }
                };
                //关闭事件
                index.onclose = function () {
                    console.log("Socket已关闭");
                };
                //发生了错误事件
                index.onerror = function () {
                    alert("Socket发生了错误");
                    //此时可以尝试刷新页面
                }
                //离开页面时，关闭socket
                //jquery1.8中已经被废弃，3.0中已经移除
                // $(window).unload(function(){
                //     socket.close();
                //});
            } else {
                console.log("您的浏览器不支持WebSocket");
            }
        });



        /**
         * 弹出消息提示框，采用浏览器布局，位于整个页面中央，默认显示3秒
         * 后面的消息会覆盖原来的消息
         * @param message：待显示的消息
         * @param type：消息类型，0：错误消息，1：成功消息
         */
        function showMessage(message, type) {
            let messageJQ = $("<div class='showMessage'>" + message + "</div>");
            if (type === 0) {
                messageJQ.addClass("showMessageError");
            } else if (type === 1) {
                messageJQ.addClass("showMessageSuccess");
            }
            /**先将原始隐藏，然后添加到页面，最后以600秒的速度下拉显示出来*/
            messageJQ.hide().appendTo("body").slideDown(600);
            /**3秒之后自动删除生成的元素*/
            window.setTimeout(function () {
                messageJQ.remove();
            }, 2000);
        }

        function send() {
            let name = $("#name").val();
            if (name.trim() === '请选择') {
                alert("请选择设备！");
                return false;
            }
            let role = $("#role").val();
            if (role.trim() === ''){
                alert("请选择角色！");
                return false;
            }
            let username = $("#username").val();
            if (username.trim() === ''){
                alert("请填写弹幕！");
                return false;
            }
            let content = $("#content").val();
            if (content.trim() === ''){
                alert("请填写弹幕！");
                return false;
            }
            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/socket/push",//url
                data: $('#myForm').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    let jsonObj = JSON.parse(result);
                    if (jsonObj.code === 1) {
                        showMessage("发送成功", 1)
                    } else {
                        showMessage("发送失败", 0)
                    };
                    // location.reload();
                },
            });
        }

        function send2() {
            let name = $("#name4").val();
            if (name.trim() === '请选择') {
                alert("请选择设备！");
                return false;
            }
            let role = $("#role4").val();
            if (role.trim() === ''){
                alert("请选择角色！");
                return false;
            }
            let username2 = $("#username2").val();
            if (username2.trim() === ''){
                alert("请填写名字！");
                return false;
            }
            let content = $("#content4").val();
            if (content.trim() === ''){
                alert("请填写弹幕！");
                return false;
            }
            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/socket/push",//url
                data: $('#myForm4').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    let jsonObj = JSON.parse(result);
                    if (jsonObj.code === 1) {
                        showMessage("发送成功", 1)
                    } else {
                        showMessage("发送失败", 0)
                    };
                    // location.reload();
                },
            });
        }

        function end() {
            let name = $("#name2").val();
            if (name.trim() === '请选择') {
                alert("请选择设备！");
                return false;
            }
            // let number2 = $("#number2").val();
            // if (number2.trim() === ''){
            //     alert("请输入观看人数！");
            //     return false;
            // }
            // let like = $("#like").val();
            // if (like.trim() === ''){
            //     alert("请输入喜欢值！");
            //     return false;
            // }
            // let fans = $("#fans").val();
            // if (fans.trim() === ''){
            //     alert("请输入粉丝数！");
            //     return false;
            // }
            // let asynCoin = $("#asynCoin").val();
            // if (asynCoin.trim() === ''){
            //     alert("请输入异栈币！");
            //     return false;
            // }
            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/socket/end",//url
                data: $('#myForm2').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    let jsonObj = JSON.parse(result);
                    if (jsonObj.code === 1) {
                        showMessage("发送成功", 1)
                    } else {
                        showMessage("发送失败", 0)
                    };
                    // location.reload();
                },
            });
        }

        function member() {
            let name = $("#name3").val();
            if (name.trim() === '请选择') {
                alert("请选择设备！");
                return false;
            }
            let number = $("#number").val();
            if (number.trim() === ''){
                alert("请输入人数！");
                return false;
            }
            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/socket/member",//url
                data: $('#myForm3').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    let jsonObj = JSON.parse(result);
                    if (jsonObj.code === 1) {
                        showMessage("发送成功", 1)
                    } else {
                        showMessage("发送失败", 0)
                    };
                    // location.reload();
                },
            });
        }


        function count(number) {

            let name = $("#name3").val();
            if (name.trim() === '请选择') {
                alert("请选择设备！");
                return false;
            }

            let current = $("#number").val();
            if (current === ''){
                current = 0;
            }
            current = parseInt(current);
            let count = current + number;
            if (count < 0){
                $("#number").val(0);
            } else {
                $("#number").val(count);
            }

            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/socket/member",//url
                data: $('#myForm3').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    let jsonObj = JSON.parse(result);
                    if (jsonObj.code === 1) {
                        showMessage("发送成功", 1)
                    } else {
                        showMessage("发送失败", 0)
                    };
                    // location.reload();
                },
            });
        }

        function sendStage() {
            let name = $("#name5").val();
            if (name.trim() === '请选择') {
                alert("请选择设备！");
                return false;
            }
            let role = $("#stage").val();
            if (role.trim() === ''){
                alert("请选择阶段！");
                return false;
            }
            let length = $("input[name='contents']").length;
            if (length === 0){
                alert("请填写内容！");
                return false;
            }
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/socket/sendStage",//url
                data: $('#myForm5').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.code === 1) {
                        showMessage("发送成功", 1)
                    } else {
                        showMessage("发送失败", 0)
                    };
                    // location.reload();
                },
            });
        }


        function saveData() {
            let role = $("#stage").val();
            if (role === '0'){
                alert("请选择阶段！");
                return false;
            }
            let length = $("input[name='contents']").length;
            if (length === 0){
                alert("请填写内容！");
                return false;
            }
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/socket/saveData",//url
                data: $('#myForm5').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.code === 1) {
                        showMessage("保存成功", 1)
                    } else {
                        showMessage("保存失败", 0)
                    };
                    // location.reload();
                },
            });
        }

        function sendGift() {
            let name = $("#name6").val();
            if (name.trim() === '请选择') {
                alert("请选择设备！");
                return false;
            }
            let role = $("#gift").val();
            if (role.trim() === ''){
                alert("请选择礼物！");
                return false;
            }
            let number3 = $("#number3").val();
            if (number3.trim() === ''){
                alert("请输入数量！");
                return false;
            }
            let username3 = $("#username3").val();
            if (username3.trim() === ''){
                alert("请输入姓名！");
                return false;
            }
            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/socket/sendGift",//url
                data: $('#myForm6').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    let jsonObj = JSON.parse(result);
                    if (jsonObj.code === 1) {
                        showMessage("发送成功", 1)
                    } else {
                        showMessage("发送失败", 0)
                    };
                    // location.reload();
                },
            });
        }

        function sendConnect() {
            let name = $("#name7").val();
            if (name.trim() === '请选择') {
                alert("请选择设备！");
                return false;
            }
            let name2 = $("#name8").val();
            if (name2.trim() === '请选择') {
                alert("请选择设备！");
                return false;
            }
            if (name === name2){
                alert("请选择不同设备进行连麦！");
                return false;
            }
            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/socket/sendConnect",//url
                data: $('#myForm7').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    let jsonObj = JSON.parse(result);
                    if (jsonObj.code === 1) {
                        showMessage("发送成功", 1)
                    } else {
                        showMessage("发送失败", 0)
                    };
                    // location.reload();
                },
            });
        }


        function sendWarning() {
            let name = $("#name9").val();
            if (name.trim() === '请选择') {
                alert("请选择设备！");
                return false;
            }
            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/socket/sendWarning",//url
                data: $('#myForm8').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    let jsonObj = JSON.parse(result);
                    if (jsonObj.code === 1) {
                        showMessage("发送成功", 1)
                    } else {
                        showMessage("发送失败", 0)
                    };
                    // location.reload();
                },
            });
        }

        function addInput() {
            inputCount++;
            let inputId ="content_"+inputCount
            let textId = "text_"+inputCount
            let brId = "br_"+inputCount
            $("#inputsWrapper").append("<br id="+brId+"><span id="+textId+">请输入内容</span><input name='contents' required='required' id='"+inputId+"'>");
        }

        function removeInput() {
            $("#text_" + inputCount).remove()
            $("#content_" + inputCount).remove();
            $("#br_" + inputCount).remove();
            inputCount--;
        }

    </script>
</head>
<body>
<div id="all">

    <div id="top">
        <div id="form1" style="text-align:center;padding-top: 10px;width: 300px;height: 100px;">
            <form id="myForm" action="/socket/push" method="get">
                请选择设备
                <select data-placeholder="请选择设备"  id="name" name="name"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                    <option   value="" selected>请选择</option>
                    <option   th:each="name:${names}" th:value="${name}"  th:text="${name}" ></option>
                </select><br>
                请选择角色<select data-placeholder="请选择角色"  id="role" name="role"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                <option   value="1">管理员</option>
            </select><br>
                请输入名字<input id="username" name="username" required="required"><br>
                请输入弹幕<input id="content" name="content" required="required"><br>
                <!--        请输入人数<input id="number" name="number" type="number" placeholder="仅支持正整数" required="required"><br><br>-->
                <input type="button" value="发送弹幕" onclick="send()">
                <!--        <input type="submit" class="btn" value="发送"/>-->
            </form>
        </div>

        <div id="form2" style="text-align:center;padding-top: 10px;width: 300px;height: 100px;">
            <form id="myForm4" action="/socket/push" method="get">
                请选择设备
                <select data-placeholder="请选择设备"  id="name4" name="name"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                    <option   value="" selected>请选择</option>
                    <option   th:each="name:${names}" th:value="${name}"  th:text="${name}" ></option>
                </select><br>
                请选择角色<select data-placeholder="请选择角色"  id="role4" name="role"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                <option   value="2">普通用户</option>
            </select><br>
                请输入名字<input id="username2" name="username" required="required"><br>
                请输入弹幕<input id="content4" name="content" required="required"><br>
                <!--        请输入人数<input id="number" name="number" type="number" placeholder="仅支持正整数" required="required"><br><br>-->
                <input type="button" value="发送弹幕" onclick="send2()">
                <!--        <input type="submit" class="btn" value="发送"/>-->
            </form>
        </div>
        <div id="form3" style="text-align:center;padding-top: 10px;width: 300px;height: 100px;">
            <form id="myForm3" action="/socket/member" method="get">
                请选择设备
                <select data-placeholder="请选择设备"  id="name3" name="name3"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                    <option   value="" selected>请选择</option>
                    <option   th:each="name:${names}" th:value="${name}"  th:text="${name}" ></option>
                </select><br>
                <!--        请选择角色<select data-placeholder="请选择角色"  id="role3" name="role3"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >-->
                <!--                    <option   value="" selected>请选择</option>-->
                <!--                    <option   value="1">管理员</option>-->
                <!--                    <option   value="2">普通用户</option>-->
                <!--                </select><br><br>-->
                请输入人数<input id="number" name="number" type="number" placeholder="仅支持正整数" min="0" required="required"><br>
                <input type="button" value="发送人数" onclick="member()">
                <input type="button" value=" +1 " onclick="count(1)">
                <input type="button" value=" -1 " onclick="count(-1)">
                <input type="button" value=" +5 " onclick="count(5)">
                <input type="button" value=" -5 " onclick="count(-5)">
                <!--        <input type="submit" class="btn" value="发送"/>-->
            </form>
        </div>

        <div id="form5" style=" float:right; text-align:center;padding-top: 10px;width: 300px;height: 100px;">
            <form id="myForm5" action="/socket/sendStage" method="get">
                请选择设备
                <select data-placeholder="请选择设备"  id="name5" name="name5"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                    <option   value="" selected>请选择</option>
                    <option   th:each="name:${names}" th:value="${name}"  th:text="${name}" ></option>
                </select><br>
                请选择阶段<select data-placeholder="请选择阶段"  id="stage" name="stage"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                <option   value="0">请选择</option>
                <option   value="1">第一阶段</option>
                <option   value="2">第二阶段</option>
                <option   value="3">第三阶段</option>
                <option   value="4">第四阶段</option>
                <option   value="5">第五阶段</option>
                <option   value="6">第六阶段</option>
                <option   value="7">第七阶段</option>
            </select><br>
                <div id="inputsWrapper"  style="width: 300px;height: 100px; overflow-y:auto">
                    <!--                <span id="text_1"/>请输入内容</span><input id="content_1" name="contents" required="required">-->
                </div>
                <input type="button" value="新增输入框" onclick="addInput()"><input type="button" value="移除输入框" onclick="removeInput()"><input type="button" value="确认保存" onclick="saveData()"><input type="button" value="发送阶段消息" onclick="sendStage()">
                <!--        <input type="submit" class="btn" value="发送"/>-->
            </form>
        </div>
    </div>

    <div id="center" style="margin-top: 10px;">
        <div>
            <div id="form4" style="text-align:center;padding-top: 10px;width: 300px;height: 50px;">
                <form id="myForm2" action="/socket/end" method="get">
                    请选择设备
                    <select data-placeholder="请选择设备"  id="name2" name="name2"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                        <option   value="" selected>请选择</option>
                        <option   th:each="name:${names}" th:value="${name}"  th:text="${name}" ></option>
                    </select><br>
                    <!--        请选择角色<select data-placeholder="请选择角色"  id="role2" name="role2"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >-->
                    <!--                    <option   value="" selected>请选择</option>-->
                    <!--                    <option   value="1">管理员</option>-->
                    <!--                    <option   value="2">普通用户</option>-->
                    <!--                </select><br><br>-->
                    <!--            请输入观看人数<input id="number2" name="number2" type="number" placeholder="仅支持正整数" min="0" required="required"><br>-->
                    <!--            请输入喜欢值<input id="like" name="like" type="number" placeholder="仅支持正整数" min="0" required="required"><br>-->
                    <!--            请输入新增粉丝<input id="fans" name="fans" type="number" placeholder="仅支持正整数" min="0" required="required"><br>-->
                    <!--            请输入新增异栈币<input id="asynCoin" name="asynCoin" type="number" placeholder="仅支持正整数" min="0" required="required"><br>-->
                    <input type="button" value="发送结束" onclick="end()">
                    <!--        <input type="submit" class="btn" value="发送"/>-->
                </form>
            </div>

            <div id="form8" style="text-align:center;padding-top: 10px;width: 300px;height: 50px;">
                <form id="myForm8" action="/socket/sendWarning" method="get">
                    请选择设备
                    <select data-placeholder="请选择设备"  id="name9" name="name9"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                        <option   value="" selected>请选择</option>
                        <option   th:each="name:${names}" th:value="${name}"  th:text="${name}" ></option>
                    </select><br>
                    <input type="button" value="发送超管警告" onclick="sendWarning()">
                </form>
            </div>
        </div>

        <div id="form6" style="text-align:center;padding-top: 10px;width: 300px;height: 100px;">
            <form id="myForm6" action="/socket/sendGift" method="get">
                请选择设备
                <select data-placeholder="请选择设备"  id="name6" name="name6"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                    <option   value="" selected>请选择</option>
                    <option   th:each="name:${names}" th:value="${name}"  th:text="${name}" ></option>
                </select><br>
                请选择礼物<select data-placeholder="请选择礼物"  id="gift" name="gift"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                <option   value="2">火箭</option>
                <option   value="1">飞机</option>
                <option   value="3">嘉年华</option>
                <option   value="4">流星雨</option>

            </select><br>
                请输入数量<input id="number3" name="number" type="number" placeholder="仅支持正整数" min="0" required="required">
                <br>
                <!--            请输入内容<input id="content6" name="content" required="required"><br>-->
                <!--        请输入人数<input id="number" name="number" type="number" placeholder="仅支持正整数" required="required"><br><br>-->
                请输入名字<input id="username3" name="username" required="required"><br>
                <input type="button" value="发送礼物" onclick="sendGift()">
                <!--        <input type="submit" class="btn" value="发送"/>-->
            </form>
        </div>

        <div id="form7" style="text-align:center;padding-top: 10px;width: 300px;height: 50px;">
            <form id="myForm7" action="/socket/connect" method="get">
                请选择设备
                <select data-placeholder="请选择设备"  id="name7" name="name7"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                    <option   value="" selected>请选择</option>
                    <option   th:each="name:${names}" th:value="${name}"  th:text="${name}" ></option>
                </select><br>
                请选择设备
                <select data-placeholder="请选择设备"  id="name8" name="name8"  class="form-control chosen-select" style="height: auto; width: 50%; "  required >
                    <option   value="" selected>请选择</option>
                    <option   th:each="name:${names}" th:value="${name}"  th:text="${name}" ></option>
                </select><br>
                <input type="button" value="发起连麦" onclick="sendConnect()">
            </form>
        </div>

    </div>

    <div id="footer" style="width: 100%; margin-top: 10px;">
        <table border="1">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>弹幕</th>
                </tr>
            </thead>
            <tbody id="tbId">
                <tr>
                    <td>张三</td>
                    <td>哈哈哈哈</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>啥子</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
